<template>
  <div>
    <el-card class="card">
      <el-descriptions
          title="个人信息"
          direction="vertical"
          :column="4"
          size="large"
          :span="2"
          border
      >
        <el-descriptions-item label="姓名" :span="2">{{ studentInfoCard?.name }}</el-descriptions-item>
        <el-descriptions-item label="学号" :span="2">{{ studentInfoCard?.username }}</el-descriptions-item>
        <el-descriptions-item label="密码" :span="4">
          <span v-if="passwordShow">{{studentInfoCard?.password}}</span>
          <span v-else > {{  }} </span>
          <el-icon  v-if="passwordShow==false" @click="changePasswordShow" style="float: right;font-size: 22px;cursor: pointer;"><View /></el-icon>
          <el-icon v-else @click="changePasswordShow" style="float: right;font-size: 22px;cursor: pointer;"><Hide /></el-icon>
          <el-popover placement="right" :width="400" v-model:visible="visible" trigger="click">
            <template #reference>
              <el-icon style="float: right;font-size: 22px;cursor: pointer;"><Edit /></el-icon>
            </template>
            <div style="padding: 20px;">
              <el-link type="warning">修改密码</el-link>
              <el-form :model="modifyForm" :rules="passwordRules">
                <el-form-item prop="newPassword">
                  <el-input v-model="modifyForm.newPassword" placeholder="输入新密码"  style="margin-top: 20px;height:40px;" />
                </el-form-item>
                <el-form-item prop="newPasswordConfirm">
                  <el-input v-model="modifyForm.newPasswordConfirm" placeholder="确认新密码" style="margin-top:10px;height:40px;"/>
                </el-form-item>
              </el-form>
              <el-button type="success" style="margin-left: 35%;margin-top: 20px;" @click="modifyPassword">确认修改</el-button>
            </div>

          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item label="年级" :span="2">{{ studentInfoCard?.grade }}</el-descriptions-item>
        <el-descriptions-item label="学业状态" :span="2">
          <el-tag size="small" v-if="studentInfoCard?.learnStatus<=1" type="success">正常</el-tag>
          <el-tag size="small" v-else-if="studentInfoCard?.learnStatus==2" type="warning">橙色预警</el-tag>
          <el-tag size="small" v-else type="danger">红色预警</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="学分"
        >{{ studentInfoCard?.credit }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import { getStudentInfo } from "@/api/user";
import { StudentCardInfo } from "@/api/user/type";
import {GET_USER} from "@/utils/userInfo";
import { ElMessage } from 'element-plus'
import {modifyMyPassword} from "@/api/student";


const passwordShow = ref(false)
const visible = ref(false)
const studentInfoCard = ref<StudentCardInfo>()
const modifyForm = reactive({
  newPassword:'',
  newPasswordConfirm:''
})

const passwordRules = reactive({
  newPassword: [
    {
      required: true,
      message: '新密码不能为空',
      trigger: 'blur'
    },
    {
      pattern: /^[A-Za-z0-9]{6,18}$/,
      message: '密码必须为6到18位,且只能包含大小写字母或数字',
      trigger: 'blur'
    }
  ],
  newPasswordConfirm: [
    {
      required: true,
      message: '确认密码不能为空',
      trigger: 'blur'
    },
    {
      pattern: /^[A-Za-z0-9]{6,18}$/,
      message: '密码必须为6到18位,且只能包含大小写字母或数字',
      trigger: 'blur'
    }
  ]
})
const hidePassword = (password:string) => {
  return '*'.repeat(password.length);
}
const changePasswordShow = () => {
  passwordShow.value = !(passwordShow.value)
}
onMounted(async() => {
  await fetchData()
})
const fetchData = async() => {
  try {
    const { data } = await getStudentInfo();
    studentInfoCard.value = data
    console.log('local',GET_USER())
  } catch (error) {
    await Promise.reject(error)
  }
}
const modifyPassword = async() => {
  if (modifyForm.newPassword === modifyForm.newPasswordConfirm) {
    const { data } = await modifyMyPassword(modifyForm.newPassword)
    ElMessage({
      message: data,
      type: 'success',
    })
    await fetchData()
  }
  else {
    ElMessage({
      message: '两次输入的密码不一致',
      type: 'error',
    })
  }
  visible.value = false
}
</script>

<style scoped>
.card {
  margin: 0 auto;
  margin-top: 5%;
  width:60%;
  opacity: 0.9;
}
.nice{
  width:65%;
  opacity: 0.9;
}
</style>
